<template>
  <div class="home">
    <div class="head">
      <el-descriptions class="margin-top" title="考研资料分享系统">
        <template #extra>
          <el-button type="primary" style="margin-top:5px" @click="goback"> 退出</el-button>
        </template>
      </el-descriptions>
    </div>
    <div>
      <el-container>
        <el-header>
          <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
          >
            <el-menu-item index="1" @click="changeComponent('useAdmin')">
              <i class="el-icon-s-order"></i>
              用户管理
            </el-menu-item>
            <el-menu-item index="2" @click="changeComponent('fileAdmin')">
              <i class="el-icon-edit"></i>
              文件管理
            </el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <div>
            <component :is="componentName" @addone="goadd"></component>
          </div>
        </el-main>
        <el-footer>@网安22.com</el-footer>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElDescriptions, ElButton, ElContainer, ElHeader, ElMenu, ElMenuItem, ElMain, ElFooter } from 'element-plus';

const router = useRouter();
const componentName = ref('useAdmin');
const activeIndex = ref('1');

const goback = () => {
  router.push('/');
};

const changeComponent = (name) => {
  componentName.value = name;
};

const goadd = (data) => {
  componentName.value = data;
};
</script>

<style scoped>
.el-header {
  background-color: #ffffff;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  height: 700px;
}
.head {
  margin-top: 0px;
  width: 100%;
  height: 50px;
  background-color: rgb(126, 170, 172);
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
</style>